![paperLogo](../../static/images/sidebar-logo.svg)

# Cross-platform Material Design for React Native

import {Button} from 'react-native-paper';
import GetStartedButtons from '../components/GetStartedButtons';
import BannerExample from '../components/BannerExample';

Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.

<GetStartedButtons />

Or check the demo app on [iOS](https://apps.apple.com/app/react-native-paper/id1548934513) or [Android](https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample).

<BannerExample />

<div class="gallery gallery-light">
  <img src="./gallery/button.png" />
  <img src="./gallery/input.png" />
  <img src="./gallery/card.png" />
</div>

<div class="gallery gallery-light">
  <img src="./gallery/searchbar.png" />
  <img src="./gallery/appbar.png" />
  <img src="./gallery/snackbar.png" />
</div>

<div class="gallery gallery-light">
  <img src="./gallery/chip.png" />
  <img src="./gallery/list.png" />
  <img src="./gallery/list-accordion.png" />
</div>

<div class="gallery gallery-light">
  <img src="./gallery/typography.png" />
  <img src="./gallery/bottom-navigation.png" />
  <img src="./gallery/fab.png" />
</div>

<div class="gallery gallery-dark">
  <img src="./gallery/button-dark.png" />
  <img src="./gallery/input-dark.png" />
  <img src="./gallery/card-dark.png" />
</div>

<div class="gallery gallery-dark">
  <img src="./gallery/searchbar-dark.png" />
  <img src="./gallery/appbar-dark.png" />
  <img src="./gallery/snackbar-dark.png" />
</div>

<div class="gallery gallery-dark">
  <img src="./gallery/chip-dark.png" />
  <img src="./gallery/list-dark.png" />
  <img src="./gallery/list-accordion-dark.png" />
</div>

<div class="gallery gallery-dark">
  <img src="./gallery/typography-dark.png" />
  <img src="./gallery/bottom-navigation-dark.png" />
  <img src="./gallery/fab-dark.png" />
</div>
